<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".tab li").click(function() {
            //            var $this=$(this);
            //            alert($this.index());
            $(this).addClass("active").siblings().removeClass("active");
            $("#content .mod").eq($(".tab li").index(this)).show().siblings("#content .mod").hide();
        });
    });

</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/top.css">

</head>



<!--
     资料设置大概在60行
     收货地址大概在172行
     实名认证大概在275行   -->


<body>
<!--顶部导航-->
<div class="headr">
    <div class="top-box">
        <div>
            <div class="l">
                &nbsp;&nbsp;&nbsp;智雷众筹平台
            </div>

            <div class="c">
                <a href="#" >搜索</a>&nbsp;|&nbsp;&nbsp;
            </div>

            <div class="rt">
                <input type="text" placeholder="请输入搜索内容" class="search">
            </div>

            <div class="rl">
                <a href="#">我的众筹(<span>3</span>)</a>&nbsp;|&nbsp;&nbsp;
                &nbsp;<a href="#">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                <a href="#">免费注册</a>
            </div>
        </div>
    </div>
</div>


<div class="container">
    <div class="tab cl">
        <li class="item active">资料设置</li>
        <li class="item">收货地址设置</li>
        <li class="item">实名认证</li>
    </div>


    <!-- 资料设置 -->
    <div id="content">
    <div class="mod">
    <div class="tabcont">
        <div class="tab1">
            <p class="desc">完善个人资料是让别人认识你的第一步</p>
            <div class="block">
                <p class="title">基本信息</p>
                <div class="list">
                    <div class="item cl">
                        <div class="lf"><span>*</span>昵称</div>
                        <div class="rt"><input type="text" placeholder="请输入您的昵称" class="name"></div>
                    </div>
                    <div class="item cl">
                        <div class="lf">头像</div>
                        <div class="rt">
                            <div class="tx fl"><img src="../images/tx.jpeg" alt=""></div>
                            <div class="sm fl">
                                <p>支持jpg、git、png格式的图片，建议文件小于20兆</p>
                                <input type="file">
                            </div>
                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf">性别</div>
                        <div class="rt">
                            <div class="radio">
                                <input type="radio" name="sex">
                                <label for=""></label>
                                <span>男</span>
                            </div>
                            <div class="radio">
                                <input type="radio" name="sex">
                                <label for=""></label>
                                <span>女</span>
                            </div>
                            <div class="radio">
                                <input type="radio" name="sex">
                                <label for=""></label>
                                <span>保密</span>
                            </div>
                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf">个人介绍</div>
                        <div class="rt">
                            <textarea name="" placeholder="用一句话介绍你自己，会在您的个人页面显示，最多输入80字"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- e=block -->
            <div class="block">
                <p class="title">联系信息</p>
                <div class="list">
                    <div class="item cl">
                        <div class="lf">真实姓名</div>
                        <div class="rt">
                            <input type="text" placeholder="请输入您的昵称" class="name">
                            <p class="desc">用于高等教育课程证书登记，不会以任何形式向第三方透露</p>
                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf"><span>*</span>常用邮箱</div>
                        <div class="rt">
                            <p>179999999@qq.com <span class="edtEmail">修改邮箱</span></p>
                            <p class="desc">
                             <div class="radio">
                                <input type="checkbox" checked>
                                <label for=""></label>
                                <span style="color: #999;"> 用于接收教育平台和课程的邮件通知，非常重要</span>
                             </div>

                            </p>

                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf"><span>*</span>手机号</div>
                        <div class="rt">
                            <input type="text" placeholder="请输入电话号码" class="phonenumber">
                            <button class="sbtn">添加</button>
                            <p class="desc">用于优质课程的学习视频等服务，手机号不会对外公开，请放心</p>
                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf">QQ号码</div>
                        <div class="rt">
                            <input type="text" placeholder="请输入QQ号码">
                            <p class="desc">用于课程的高效交流，方便机构教师答疑解惑</p>
                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf"> &nbsp;</div>
                        <div class="rt">
                            <button class="btn">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>


    <!-- 收货地址   address简称ad 电话号码简称为tel-->
    <div class="mod" style="display: none">
    <div class="tabcont">
        <div class="tab1">
            <form class="block">

                <p class="title">我的收获地址</p>
                <div class="list">
                    <div class="table-b">
                        <table width="1000" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="40">收件人</td>
                                <td width="60">所在地区</td>
                                <td width="40">邮政编码</td>
                                <td width="80">详细地址</td>
                                <td width="40">电话</td>
                                <td width="40">操作</td>

                            </tr>
                            <tr>
                                <td>江清</td>
                                <td>广东省广州市越秀区</td>
                                <td>510080</td>
                                <td>中山大学</td>
                                <td>136667779998</td>
                                <td>
                                    delete/edit
                                </td>
                            </tr>

                        </table>
                    </div>
                </div>

                <p class="title">新增收获地址</p>


                <div class="list">

                    <!-- form表单 -->
                    <form id="address" name="address" method="post" action="收获地址对应的.aspx"></form>

                    <div class="item cl">
                        <div class="lf"><span>*</span>请选择省市</div>
                        <div class="rt">    </div>
                    </div>

                    <div class="item cl">
                        <div class="lf"><span>*</span>详细地址</div>
                        <div class="rt">

                            <!-- 详细地址id -->
                            <textarea name="details" id="details" placeholder="请输入详细地址信息————街道，小区，门牌号"></textarea>
                        </div>
                    </div>

                    <div class="item cl">
                        <div class="lf"><span>*</span>邮政编码</div>
                        <div class="rt">

                            <!-- 邮政编码id -->
                            <input name="postcode" id="postcode" type="text" placeholder="000000" class="postal">
                        </div>
                    </div>
                    <!-- e=block -->

                    <div class="block">
                        <p class="title">联系信息</p>
                        <div class="list">
                            <div class="item cl">
                                <div class="lf"><span>*</span>姓名</div>
                                <div class="rt">

                                    <!-- 名字id -->
                                    <input name="ad_name" id="ad_name" type="text" placeholder="请输入您的姓名" class="name">
                                    <p class="desc"></p>
                                </div>
                            </div>

                            <div class="item cl">
                                <div class="lf"><span>*</span>手机号</div>
                                <div class="rt">

                                    <!-- 电话id -->
                                    <input name="ad_tel" id="ad_tel" type="text" placeholder="请输入电话号码" class="phonenumber">
                                </div>
                            </div>

                            <div class="item cl">
                                <div class="lf"> &nbsp;</div>
                                <div class="rt">
                                    <button class="btn" type="submit">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

              </form>

            </div>
        </div>
    </div>



    <!-- 实名认证   certificaation简称cer  身份证号简称iden-->
    <div class="mod" style="display: none">
    <div class="tabcont">
        <div class="tab1">

            <!-- 实名form表单 action需要改，我不确定对不对，id我都很清楚，很方便改-->
            <form id="certification" name="certification" method="post" action="/realname/add.do">

            <p class="desc">实名认证以便完整使用平台功能</p>
            <div class="block">
                <p class="title">实名信息认证</p>
                <div class="list">

                    <div class="item cl">
                        <div class="lf">真实姓名</div>
                        <div class="rt">

                            <!-- 实际名字id -->
                            <input name="realname" id="cer_name" type="text" placeholder="请填写真实姓名" class="name">
                        </div>
                    </div>

                    <div class="item cl">
                        <div class="lf">身份证号码</div>
                        <div class="rtl">

                            <!-- 身份证号id -->
                            <textarea name="idcard" id="cer_iden"  placeholder="请填写姓名对应的身份证号码"></textarea>
                        </div>
                    </div>

                    <div class="item cl">
                        <div class="lflong">&nbsp;&nbsp;&nbsp;&nbsp;手持身份证反面照片
                            <p class="fr">&nbsp;&nbsp;支持jpg、git、png格式的图片，建议文件小于20兆</p>
                        </div>
                    </div>

                    <div class="item cl">
                        <div class="lf">&nbsp;</div>
                        <div class="rt">
                            <!-- 我的图片是file形式的不知道行不行，可以改 -->
                            <div class="tx fl"><img src="../../images/tx.jpeg" alt=""></div>
                            <div class="sm fl">

                                <!-- 照片id -->
                                <input name="img_file" id="cer_photo" type="file">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- e=block -->

            <div class="block">
                <p class="title">联系信息认证</p>
                <div class="list">

                    <div class="item cl">
                        <div class="lf">手机号</div>
                        <div class="rt">

                            <!-- 实际电话id -->
                            <input name="phone" id="cer_tel" type="text" placeholder="请输入电话号码" class="phonenumber">
                            <button class="lbtn">获取验证码</button>
                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf">邮箱</div>
                        <div class="rt">

                            <!-- 实际邮箱id -->
                            <input name="email" id="cer_mail" type="text" placeholder="请输入邮箱" class="mail">
                        </div>
                    </div>
                    <div class="item cl">
                        <div class="lf"> &nbsp;</div>
                        <div class="rt">
                            <button class="btn" type="submit">申请完成</button>
                            <p class="desc">申请完成后请等待后台审核</p>
                        </div>
                    </div>
                </div>
            </div>
            </form>

        </div>
    </div>
    </div>


</div>
</div>
</body>

</html>